<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <ul class="list">
        <li abc="mark">link1</li>
        <li class="red" abc="mark">link2</li>
        <li abc="mark">link3</li>
        <li>link4</li>
        <li class="red">link5</li>
        <li abc="mark">link6</li>
    </ul>
</body>
<script>
    var list = document.querySelector(".list");

    // 需求：点击不同的li或者到对应的li
    // var li = document.querySelectorAll(".list li");
    // for(var i=0;i<li.length;i++){
    //     li[i].onclick = function(){
    //         console.log(this);
    //     }
    // }

    list.onclick = function(eve){
        var e = eve || window.event
        var target = e.target || e.srcElement;
        if(target.getAttribute("abc") === "mark"){
            console.log(target);
        }
    }

    // 所有的DOM节点，都具有所有事件，只是有没有事件处理函数而已
    // 或者这个事件的触发方式的不同，导致事件处理函数无法执行而已

    // 绑定事件，其实并不是在绑定 事件 ，而只是在绑定事件处理函数

    // console.log(list);

    // console.dir(list);
    
    
</script>
</html>